<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webchat</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wc-chat">
    <div class="wc-title">
        <label for="title" id="title"></label>
    </div>
    <div class="wc-show" id="words">

    </div>
    <div class="wc-input">
        <input type="text" class="wc-words" id="wcwords">
        <input type="button" value="发送" class="wc-sub" id="wcsub">
    </div>
</div>
</body>
<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
    require(["jquery", "vue", "ws"], function($, Vue, ws){
        $(function () {
            if ("WebSocket" in window) {
                console.log('支持websocket')
                ws.init();

                $(document).keydown(function(event){
                    if(event.keyCode ==13){
                        sendMsg();
                    }
                });
                $('#wcsub').click(function () {
                    sendMsg();
                })

                function sendMsg() {
                    var msg = $('#wcwords').val().trim();
                    if (msg) {
                        ws.send(msg);
                        $('#words').append('<div class="own-talk"><span class="own">' + msg + '</span></div>');
                        $('#wcwords').val('');
                    }
                }

            } else {
                console.log('不支持websocket')
            }
			//心跳
			setInterval(function () {
				if (ws.checkHeart == true) {
					ws.init();
				}
			  }, 10000);
			
        })

    })

</script>
</html>
